import React, {Component} from 'react'
import {View, Text, Button, TouchableOpacity, Image, ScrollView, Dimensions} from 'react-native'
import {GetHomeworkApi} from '../../config/api'
import LoadingCommon from '../common/loading_common'
import HeadingLine from '../common/heading_line'
import Enumeration from '../../config/enumeration'
import {GetNotificationCorrectApi} from '../../config/api'
import styles from '../../config/styles'

var {height, width} = Dimensions.get('window')

class NotificationCorrecting extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: '查看通知',
            headerRight: (
                <TouchableOpacity
                    onPress={() => navigation.navigate('notifications_show', {id: navigation.state.params.id})}
                    style={{paddingRight: 5}}
                >                  
                    <Text style={styles.header_font}>通知详情</Text>
                </TouchableOpacity>
            ),
            gesturesEnabled: true
        }
    }

    constructor (props) {
        super(props)
        this.state = {
            id: props.navigation.state.params.id,
            loading: true,
            active_class_id: null,
            classrooms: [],
            correct_data_source: {}
        }
    }

    componentDidMount () {
        this.get_correct()
    }


    //获取数据
    get_correct = () => {
        GetNotificationCorrectApi(this.state.id).then((data) => {
            if (data.code === 0) {
                let _data_source = {}
                data.classrooms.forEach((classroom, index) => {
                    _data_source[classroom.id] = classroom
                    this.state.classrooms.push({name: classroom.name, id: classroom.id})
                    if (index == 0) this.state.active_class_id = classroom.id //把第一个班级作为当前选中的班级ID
                })
                  /*
                    _data_source, 1和2是班级ID
                    {
                        1: {
                        xxx: [..],
                        yyy: [...],
                        zzz: [...]
                        },
                        2 {...}
                    }
                */
                this.setState({
                    correct_data_source: _data_source, 
                    loading: false
                })
            }
        })
    }

    //变更当前选中的班级
    change_active_classroom = (classroom_id) => {
        this.setState({active_class_id: classroom_id})
    }

    //选择班级
    classroomTemplate = (classroom, index) => {
        //let _backgroundColor = classroom.id == this.state.active_class_id ? '#2894FF' : 'white'   
        return(
            <TouchableOpacity 
                onPress={() => this.change_active_classroom(classroom.id)}
                key={index} 
                style={[styles.classroom_select, styles.background_blue]}
            >
                <Text style={styles.text_white}>{classroom.name}</Text>
            </TouchableOpacity>
        )                     
    }


    //展示学生的地方
    studentTemplate = (student, index, status) => {
        let image = student.sex == true ? require('../../assets/images/role-student-male.png') : require('../../assets/images/role-student-female.png')
        //未交的学生不能批改，其他的都可以
        return (
            <View key={index}>
                <View>
                    <Image source={image} style={[styles.image_wrap]} />
                </View>
                <View style={{alignItems: 'center'}}>
                    <Text>{student.name}</Text>         
                </View>
            </View>
        )
    }

    render () {
        if (this.state.loading) {
            return ( <LoadingCommon />)
        } else {
            let data = this.state.correct_data_source[this.state.active_class_id]
            let col_objects = [
                {col: 'unread', color: 'red', name: '未读'},
                {col: 'read', color: '#844200', name: '已读'}    
            ]

            return (
                <ScrollView style={styles.main_body}>
                    <View style={[styles.classroom_container, {backgroundColor: 'white', margin: 5}]}>
                        {this.state.classrooms.map((classroom, index) => {
                            return(this.classroomTemplate(classroom, index))
                        })}
                    </View>
                    {col_objects.map((col_obj, index) => {
                        return(
                            <HeadingLine
                                key={index} 
                                color={col_obj.color}
                                title={`${col_obj.name}: ${data[col_obj.col].length}`}
                                style={{backgroundColor: 'white', marginTop: 10}}
                                contentStyle={{backgroundColor: 'white'}}
                                collapsible={false}
                            >
                                <View style={[styles.classroom_container]}>
                                    {data[col_obj.col].map((student, index) => {
                                        return this.studentTemplate(student, index, col_obj.col)         
                                    })}
                                </View>
                            </HeadingLine>
                        )
                    })}
                </ScrollView>
            )
        }
      
    }
}

export default NotificationCorrecting